<template>
	<view class="account">
		<view class="account-head">
			<view class="back" @click="navigateBack()">
			</view>
		</view>
		<view class="pandel">
			<view class="account_list">
				<view class="account_item" v-for="(item,i) in list" @click="change(i)" :key="i">
					<view class="">{{item.name}}</view>
				</view>
			</view>
			<view class="search_wrap" :style="{ backgroundImage: 'url(' + bgImageUrl + ')'}">
				<text class="text">请输入您要验证的号码</text>
				<view class="input-warp">
					<input type="text" v-model="title" placeholder="" @confirm="search" />
					<image src="~@/static/account/close_@2x.png" mode="widthFix" @click="clearTitle"></image>
				</view>

				<button class="search_btn" @click="submit">查询</button>
			</view>
		</view>
		
		<view class="mypopup" v-show="show">
			<view class="mypopup-inner">
				<view class="mypopup-text" :style="{backgroundImage: 'url(' + bgPopup + ')' }">
					<view class="title">
						{{cindex==0?'客服验证':cindex==1?'黑号查询':'收款账户验证'}}报告
					</view>
					<view class="subtitle fontW800">查询号码：</view>
					<view class="subtitle mb35">{{title}}</view>
					<view class="subtitle fontW800">查询结果：</view>
					<view class="subtitle mb35">{{message_details.tips}}</view>
					<view class="subtitle fontW800">查询时间：</view>
					<view class="subtitle">{{message_details.time}}</view>
					
				</view>
				<button class="closeBtn" @click="show=false">知道了</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { account_check } from '@/api/index'
	export default {
		data() {
			return {
				title:'',
				list: [
					{name:'客服验证'},
					{name:'黑号查询'},
					{name:'收款账户验证'} 
				],
				cindex: 0,
				message_details: {},
				bgImageUrl:'../../static/account/bubble_1@2x.png',
				bgPopup:'../../static/account/popup@2x.png',
				show: false
			}
		},
		methods: {
			change(e){ 
				this.cindex = e
				this.bgImageUrl = `../../static/account/bubble_${e+1}@2x.png`
			},
			clearTitle() {
				this.title = ''
			},
			search() {},
			async submit() {
				let data = await account_check({account: this.title, type: this.cindex})
				this.show = true;
				this.message_details = data.data
				if(data.data.status ==1) {
					this.bgPopup = `../../static/account/popupf@2x.png`
				}else {
					this.bgPopup = `../../static/account/popup@2x.png`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.account {
		background: linear-gradient(270deg, #FFCB8E 0%, rgba(255, 255, 255, 0) 100%);
		background: url(~@/static/account/bg_@2x.png) no-repeat;
		background-size: 100%;
		padding-top: 90rpx;

		.back {
			height: 30px;
			width: 30px;
			margin-left: 30px;
			background: url(~@/static/account/icon_back@2x.png) no-repeat;
			background-size: 100%;
		}

		.pandel {
			position: relative;
			margin-top: 100px;
			background: #FFFFFF;
			padding: 0 30rpx;

			&::after {
				content: "";
				position: absolute;
				top: -40rpx;
				left: 0;
				right: 0;
				width: 100%;
				height: 40rpx;
				background-color: #FFFFFF;
				border-radius: 40rpx 40rpx 0px 0px;
			}

			.account_list {
				display: flex;
				justify-content: space-between;
				height: 172rpx;
				.account_item {
					flex: 1;
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 14px;
					border-radius: 10px 10px 10px 10px;
					padding: 15rpx;

					image {
						width: 64rpx;
						height: 64rpx;
					}

					&:nth-of-type(1) {

						color: #912020;
						background: url(~@/static/account/list_1@2x.png) no-repeat;
						background-size: 100%;
					}

					&:nth-of-type(2) {
						color: #5E4412;
						margin: 0 10rpx 0 10rpx;
						background: url(~@/static/account/list_2@2x.png) no-repeat;
						background-size: 100%;
					}

					&:nth-of-type(3) {
						color: #193BB5;
						background: url(~@/static/account/list_3@2x.png) no-repeat;
						background-size: 100%;
					}
				}
			}

			.search_wrap {
				min-height: 484rpx;
				background-size: 100%;
				background-repeat: no-repeat;
				padding: 55rpx;
				.text {
					font-weight: bold;
					font-size: 16px;
					color: #5E4412;
					line-height: 55px;
					text-align: left;
				}
				.input-warp {
					margin: 55rpx auto;
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 295px;
					height: 42px;
					background: #FFFFFF;
					border-radius: 10px 10px 10px 10px;

					input {
						width: 85%;
					}

					image {
						width: 20px;
						height: 20px;
					}
				}
				.search_btn {
					width: 255px;
					height: 96rpx;
					line-height: 96rpx;
					background: url(~@/static/account/button_yellow.png)no-repeat;
					background-size: 100% 100%;
					font-weight: bold;
					font-size: 16px;
					color: #22150B;
					outline: none;
					
				}
				uni-button:after {
					border: none;
				}
			}
		}
		.mypopup {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,0.4);
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.mypopup-inner {
			.mypopup-text {
				height: 764rpx;
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				.title {
					font-weight: 800;
					font-size: 36rpx;
					color: #22150B;
					line-height: 42rpx;
					text-align: left;
					padding-left: 12%;
					padding-top: 240rpx;
					padding-bottom: 85rpx;
				}
				.subtitle {
					
					font-size: 28rpx;
					color: #22150B;
					line-height: 38rpx;
					padding: 0 125rpx;
				}
				.fontW800 {
					font-weight: 800;
				}
				.mb35 {
					margin-bottom: 35rpx;
				}
			}
			.closeBtn {
				background: url(@/static/account/button@2x.png) no-repeat;
				background-size: 100%;
				width: 300rpx;
				height: 84rpx;
				margin-top: 55rpx;
			}
		}
	}
</style>
